<template lang="html">
<div class="mine">
  <div class="mymusic">
    <p>我的音乐</p>
  </div>
  <div class="bar">
    <div class="bar_content">
      <div class="">
          <img src="../../assets/images/misc.png" alt="">
      </div>
      <div class="bar_desc">
          <span>本地音乐</span>
          <span>49 ></span>
      </div>
    </div>
    <div class="bar_content">
      <div class="">
          <img src="../../assets/images/zuij.png" alt="">
      </div>
    <div class="bar_desc">
          <span>最近播放</span>
          <span>49 ></span>
      </div>
    </div>
    <div class="bar_content">
      <div class="">
          <img src="../../assets/images/radio.png" alt="">
      </div>
    <div class="bar_desc">
          <span>我的电台</span>
          <span>49 ></span>
      </div>
    </div>
    <div class="bar_content">
      <div class="">
          <img src="../../assets/images/mylike.png" alt="">
      </div>
    <div class="bar_desc" style="border:none">
          <span>我的收藏</span>
          <span>49 ></span>
      </div>
    </div>
  </div>
  <div class="mylike">
    <mu-container>
      <p @click="show3 = !show3" class="likemusic"><span class="tit">{{show3?'▴':'▾'}}</span>我创建的歌单</p>
      <mu-flex class="mu-transition-row">
        <mu-expand-transition>
          <div v-show="show3">
            <div class="music_list" v-for='(i,index) in music_list' :key='index'>
                <div class="music_list_flex">
                  <div class="flex_one">
                    <img :src="i.coverImgUrl" alt="">
                  </div>
                  <div class="flex_two">
                     <p class="music_name">{{i.name}}</p>
                     <p><span class="music_count">{{i.trackCount}}首</span></p>
                  </div>

                </div>
            </div>
          </div>
        </mu-expand-transition>
      </mu-flex>
    </mu-container>
  </div>


</div>
</template>

<script>
export default {
	name: 'mine',
	data() {
		return {
			msg: "",
      show3: true,
      music_list:[]
		}
	},
  methods:{

  },
  mounted(){
    let uuid=localStorage.getItem("uuid")
    this.axios({
      url:this.HOST+"/user/playlist",
      method:"post",
      params:{
        uid:uuid
      }
    }).then((res=>{
      let data=res.data.playlist;
      this.music_list=data
      console.log(data)

    })).catch(function(err){
      console.log(err)
    })
  },
  created(){

  }
}
</script>

<style lang="css">
.music_count{
  font-size: .25rem;
  margin-left: .1rem;
  color:#87CEFA;
}
.music_name{
  width: 98%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flex_one{
    width: 16% !important;
}
.flex_two{
    width: 84% !important;
    border-bottom: 1px solid #dcdcdc;
}
.music_list img{
  width: 90%;
  border-radius: 4px;
}
.music_list_flex{
  width: 100%;
  height: 1rem;
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-around;
}
.mylike .d-flex{
  width: 100%;
  height: 6.4rem;
  overflow-y:scroll;
}
.mylike .container .d-flex ,.flex-row,.justify-content-start,.align-items-start,.mu-transition-row div:nth-child(1){
  width: 100%;
}
.tit{
  font-size: .4rem;
}
.mylike{
  background: #EDEEF0;
}
.mylike .container{
  width: 100%;
  height: .6rem;
}
.likemusic{
  background: #EDEEF0;
  width: 100%;
  height: .6rem;
  line-height: .6rem;
  font-size: .3rem;
}
.bar_desc span:nth-of-type(1){
  /* margin-left: .3rem; */
}
.bar_desc span:nth-of-type(2){
  float: right;
  margin-right: .3rem;
}
.mymusic{
  width: 100%;
  height: .5rem;
  background: red;
  color: white;
  font-size: .3rem;
  text-align: center;
  line-height: 0.5rem;
}
.bar_content{
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bar_content div:nth-of-type(1){
  width: 10%;
  height: 1rem;
  line-height: 1rem;
}
.bar_content div:nth-of-type(2){
  width: 90%;
  height: 1rem;
  line-height: 1rem;
  border-bottom: 1px solid gainsboro;
}
.bar{
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #FCFCFC;
}
.bar img{
  width: .4rem;
  margin-left: .1rem;
  vertical-align: middle;
}
</style>
